import './index.scss'
/** util */
import {
  flatten
} from 'src/modules/im/imChat/components/messageBox/inputEdit/util.js';
import { replaceURLWithHTMLLinks } from '@src/modules/im/imChat/utils/tools.js'
/** mixins */
import ChatMixin from '@src/modules/im/ChatMixin/index.js';

export default {
  name: 'paragraph-message',
  mixins:[ChatMixin],
  props: {
    item: {
      type: Object,
      default: () => ({}),
    },
    msgInfo: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      nodes: []
    };
  },
  computed: {
    html() {
      return this.msgInfo.messageContent.msg;
    },
  },

  created() {
    this.getNodes()
  },

  methods: {
    getNodes() {
      let list = this.msgInfo.messageContent?.nodes ?? []
      list = flatten(list).map(v => {
        return {
          ...v,
          loading: v.type == 'image'
        }
      })
      this.nodes = list
    },

    imgLoad(idx) {
      this.$set(this.nodes[idx], 'loading', false)
    },

    renderText(item) {
      let text = replaceURLWithHTMLLinks(item.text).replace(/\n/g, '<br>')
      return (
        <span domPropsInnerHTML={text}></span>
      )
    },

    renderImage(item, idx) {
      let { src, href = JSON.stringify({}) } = item
      let dataHref = href ? JSON.parse(href) : {}
      let isemoji = dataHref?.isemoji ?? false
      let pointer = item.type == 'image' && !isemoji ? 'pointer' : ''
      let preHeight = item.type == 'image' && !isemoji && item.loading ? 'preHeight' : ''
      let classList = ['msg-img', isemoji ? '' : 'chat-preview-img', pointer, preHeight]
      return (
        <el-image
          v-loading={item.loading && !isemoji}
          class={classList}
          fit="contain"
          src={src}
          onClick={() => { this.imgClick({ src, isemoji }) }}
          onLoad={() => { this.imgLoad(idx) }}
        ></el-image>
      )
    },

    imgClick(obj) {
      if (obj.isemoji) return
      this.chatImgPreview(obj.src)
    }
  },
  render() {
    return (
      
      <div class="message-content info-content info-content-paragraph">
        {
          this.nodes.map((item, index) => {
            if (item.text) {
              // 文本
              return this.renderText(item)
            }
            if (item.type == 'image') {
              // 图片
              return this.renderImage(item, index)
            }
          })
        }
      </div>
    )
  },
};